<template>
    <div class="">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/home/cart' }">购物车</el-breadcrumb-item>
            <el-breadcrumb-item>购物车详情</el-breadcrumb-item>
        </el-breadcrumb>
        <el-table
        class="tab"
        :data="showList">
            <el-table-column
                label="图片">
                <template slot-scope="scope">
                    <img :src="scope.row.img" style="height: 120px;min-width:120px;"/>
                </template>
            </el-table-column>
            <el-table-column
                label="商品名称">
                <template slot-scope="scope">
                    <span>{{scope.row.good_name}}</span>
                </template>
            </el-table-column>
            <el-table-column label="sku">
                <template slot-scope="scope">
                    <span>{{scope.row.sku}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="商品价格" class="hh">
                <template slot-scope="scope">
                    <span>￥{{scope.row.price}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="数量">
                <template slot-scope="scope">
                    <el-button :disabled="scope.row.num==1?true:false" icon="el-icon-minus" size="mini" @click="minus(scope.row)"></el-button>
                    <span style="margin:0 10px">{{scope.row.num}}</span>
                    <el-button icon="el-icon-plus" size="mini" @click="add(scope.row)"></el-button>
                </template>
            </el-table-column>
            <el-table-column
                label="操作">
                <template slot-scope="scope">
                    <el-button @click="del(scope.row)" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2, 4, 8]"
            :page-size="currentSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>
<script>
export default{
    name:"cartdetail",
    created(){
        console.log(this.$route)
        this.token = this.$route.query.token
        this.getCartInfo()
    },
    data(){
        return {
            token:undefined,
            cartInfo:[],
            currentPage:1,
            currentSize:1,
            showList:[]
        }
    },
    methods:{
        async getCartInfo(){
            let result = await this.axios.post("http://api_devs.wanxikeji.cn/api/shoppingCarList",{token:this.token})
            // console.log(result)
            this.cartInfo = result.data.data.data
            this.renderList()
        },
        renderList(){
            let arr=[]
            let startIdx = (this.currentPage-1)*this.currentSize
            let endIdx = this.currentPage*this.currentSize
            if(endIdx>this.cartInfo.length){
                endIdx = this.cartInfo.length
            }
            for(let i=startIdx;i<endIdx;i++){
                arr.push(this.cartInfo[i])
            }
            this.showList = arr
        },
        handleSizeChange(size){
            this.currentSize = size
            this.renderList()
        },
        handleCurrentChange(page){
            this.currentPage = page
            this.renderList()
        },
        async del(row){
            // console.log(row)
            await this.axios.post("http://api_devs.wanxikeji.cn/api/shoppingCarDelete",{
                token:this.token,
                shopping_car_id:row.shopping_car_id
            })
            this.getCartInfo()
        },
        async add(row){
            row.num++
            let oneamount = row.num*row.price
            await this.axios.post("http://api_devs.wanxikeji.cn/api/shoppingCarAddModify",{
                token:this.token,
                shopping_car_id:row.shopping_car_id,
                good_id:row.good_id,
                num:row.num,
                price:row.price,
                money:oneamount,
                sku:row.sku
            })
        },
        async minus(row){
            row.num--
            let oneamount = row.num*row.price
            await this.axios.post("http://api_devs.wanxikeji.cn/api/shoppingCarAddModify",{
                token:this.token,
                shopping_car_id:row.shopping_car_id,
                good_id:row.good_id,
                num:row.num,
                price:row.price,
                money:oneamount,
                sku:row.sku
            })
        }
    },
    computed:{
        total(){
            return this.cartInfo.length
        }
    }
}
</script>
<style>
.home{
    display: block;
}
.el-breadcrumb,.el-table{
    margin-top:20px
}
.el-pagination{
    text-align:center;
    margin-top:20px
}
</style>